<script setup>
import {computed, getCurrentInstance, onBeforeUnmount, ref} from "vue";
import {showSuccessToast, showToast} from "vant";
import {areaList} from '@vant/area-data';
import {SaveOrUpdateAddress, QueryAddress} from "@/api/address.js"
import useStore from "@/store/index.js";

const {userInfo} = useStore()
const {proxy} = getCurrentInstance()

const addressInfo = computed(() => JSON.parse(sessionStorage.getItem("address_detail")) || {});

const onSave = async (info) => {
  try {
    await SaveOrUpdateAddress(info)
    await userInfo.getUserAddress()
    if(info.isDefault) {
      userInfo.updateAddressIndex(0)
    }
    showSuccessToast("添加完成")
  } catch (e) {
  }
}
const onDelete = () => showToast('delete');

const onClickLeft = () => proxy.$router.back()

onBeforeUnmount(() => {
  sessionStorage.removeItem("address_detail")
})
</script>

<template>
  <van-nav-bar
      title="添加地址"
      left-arrow
      @click-left="onClickLeft"
  />
  <div class="bg-[#f6f6f6] content">
    <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :address-info="addressInfo"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
    />
  </div>

</template>

<style scoped lang="scss">
.content {
  height: calc(100vh - 46px);
  overflow: auto;
}
</style>
